<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            margin: 20px auto;
            border: 1px solid #eee;
            padding: 10px;
        }

        .btn {
            width: 100px;
            height: 35px;
            background-color: rgb(55, 103, 158);
            color: #fff;
            font-size: 18px;
            line-height: 35px;
            text-align: center;
            border-radius: 5px;
            margin-left: 20px;
            vertical-align: top;
            cursor: pointer;
        }

        table {
            margin: 15px 50px;
            width: 900px;
            text-align: left;
            border-spacing: 0;
            line-height: 40px;
        }

        .inf {
            display: inline-block;
            height: 35px;
            width: 252px;
            box-sizing: border-box;
            border: 1px solid rgb(55, 103, 158);
            border-radius: 5px;
            overflow: hidden;
        }

        .inf input {
            width: 180px;
            border: none;
            height: 33px;
            box-sizing: border-box;
            outline-style: none;
            padding-left: 5px;
        }

        .inf span {
            display: inline-block;
            width: 70px;
            height: 33px;
            background-color: #eee;
            box-sizing: border-box;
            vertical-align: middle;
            line-height: 33px;
            text-align: center;
        }

        th,
        td {
            border: 1px solid #eee;
            border-left: .5px;
            border-top: .5px;
            padding-left: 10px;
        }

        th {
            border-top: 1px solid #eee;
        }

        th:first-child,
        td:first-child {
            border-left: 1px solid #eee;
        }

        td:last-child span {
            display: block;
            height: 30px;
            width: 60px;
            background-color: rgb(55, 103, 158);
            border-radius: 5px;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inf"><span>书名</span><input type="text" name="bookname" class="bookname"></div>
        <div class="inf"><span>作者</span><input type="text" name="author" class="author"></div>
        <div class="inf"><span>出版社</span><input type="text" name="publisher" class="publisher"></div>
        <button type="submit" class="btn">新增</button>
        <div class="list">
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <script type="text/html" id="ren">
    <tr>
        <td>{{id}}</td>
        <td>{{bookname}}</td>
        <td>{{author}}</td>
        <td>{{publisher}}</td>
        <td><span id="{{id}}">删除</span></td>
    </tr>
    </script>
    <script>
        const tbody = document.querySelector("table tbody");
        const del = document.querySelector('table tbody');
        const bookna = document.querySelector('.bookname')
        const auth = document.querySelector('.author')
        const publ = document.querySelector('.publisher')
        const btn = document.querySelector('.btn');
        // 点击按钮上传数据并重新渲染列表
        btn.addEventListener('click', function () {
            const bookname = bookna.value;
            const author = auth.value;
            const publisher = publ.value;
            if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) return alert('图书信息请输入完整');
            renderajax({
                type: 'POST',
                url: 'http://www.liulongbin.top:3006/api/addbook',
                data: {
                    bookname,
                    author,
                    publisher
                },
                success: function () {
                    getList();
                    bookna.value = '';
                    auth.value = '';
                    publ.value = '';
                }
            })
        })
        // 点击删除并重新渲染列表
        del.addEventListener('click', function (e) {
            if (!(e.target.id)) return;
            renderajax({
                type: 'GET',
                url: 'http://www.liulongbin.top:3006/api/delbook',
                data: {
                    id: e.target.id
                },
                success: function () {
                    getList();
                }
            });
        })
        // 渲染结构函数
        // 请求数据并渲染
        getList();
        // 请求页面函数
        function getList() {
            renderajax({
                type: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                data: {
                },
                success: function (res) {
                    render(res)
                }
            });
        }
        // 上传字符转换函数
        function submitCharacter(data) {
            let str = '';
            for (const key in data) {
                str += `${key}=${data[key]}&`
            }
            return str.slice(0, str.length - 1)
        }
        // ajax封装函数
        function renderajax(value) {
            const str = submitCharacter(value.data);
            const xhr = new XMLHttpRequest();
            if (value.type.toUpperCase() == 'GET') {
                xhr.open(value.type, `${value.url}?${str}`)
                xhr.send();
            }
            if (value.type.toUpperCase() == 'POST') {
                xhr.open(value.type, value.url);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(str);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    value.success(JSON.parse(xhr.responseText))
                }
            }
        }
        // 结构生成函数
        function render(res) {
            let strs = ''
            res.data.forEach(element => {
                strs += itgc('ren', element);
            })
            tbody.innerHTML = strs
        }
        // 字符串模板函数
        function itgc(obj, value) {
            let str = document.getElementById(obj).innerHTML
            const reg = /{{\s*([a-zA-Z)]+)\s*}}/
            let arr;
            while (arr = reg.exec(str)) {
                str = str.replace(arr[0], value[arr[1]])
            };
            return str
        }


    </script>
</body>

</html>